<template>
	<view>
		<my-search-a></my-search-a>
		<view class="history-list">
			<!--列表项-->
			<navigator class="history-item" v-for="(item,index) in historyList" :key="item.id" 
				:url="'/pkg/history-detail/history-detail?historyId='+item.id">
				<!--左侧图片容器-->
				<view class="history-img-wrap">
					<image :src="baseUrl+item.imgPath"  ></image>
				</view>
				<!--右侧简介-->
				<view class="history-info-wrap">
					<text class="info-text">果蔬类型：{{item.varietyCode}}</text></br>
					<text class="info-text">成熟数量：{{item.matureCount}}</text></br>
					<text class="info-text">总数量：{{item.totalCount}}</text></br>
					<text class="info-text">成熟度：{{(item.matureCount/item.totalCount)*100}}%</text></br>
					<text class="info-text">记录日期：{{item.createTime}}</text>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                baseUrl:uni.$request.baseUrl ,
				historyList: [],
			}
		},
		methods: {
			async getHistory() {
                const {
                    data: res
                } = await uni.$request.get('/history/1/10')
                if (res.code == 200) {
                    this.historyList = res.data.records
                }
                
			}
		},
		onShow() {
			this.getHistory()
		}
	}
</script>

<style lang="scss">
	
	.history-list{
		padding: 0 10rpx;
		
		.history-item{
		    display: flex;
		    border-bottom: 5rpx solid #ccc;
			
		    .history-img-wrap{
		      flex:1;
		      display:flex;
		      justify-content: center;
		      align-items: center;
			  width: 200rpx;
		      padding: 20rpx;
		      image{
		        width: 200rpx;
				height: 200rpx;
		      }
		    }
			
		    .history-info-wrap{
		      flex:2;
		      display: flex;
		      flex-direction: column;
		      justify-content: space-around;
			  padding: 20rpx;
		      .info-text{
				  font-size: 26rpx;
		      }
		    }
		  }
	}
	

</style>
